import './manage.scss'
import React,{useEffect,useState,useRef } from 'react';
import echarts from 'echarts';
import axios from 'axios';


export default function Manage (){
    const [userCount, setuserCount] = useState(0); //用户
    const [orderCount, setorderCount] = useState(0);  //订单
    const [adminCount, setadminCount] = useState(0);  //管理员
    const [usersCount, setusersCount] = useState(''); 
    const [ordersCount, setordersCount] = useState(''); 
    const [AdminCount, setAdminCount] = useState(''); 
    let userPromise = []
    let orderPromise = []
    let adminPromise = []
    const convas= useRef(null)
    useEffect(()=>{
        let days =[]
        let date = new Date();
        let d = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+getZero(date.getDate()) ;days .unshift(d);
        for(let i=0;i<6;i++){
            date.setDate(date .getDate()-1);let d = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+getZero(date.getDate());days.unshift(d ); // i : 7 i:1 6 i:2  6-2 4
        }
        console.log(days);

        var myDate = new Date(); //获取今天日期
        myDate.setDate(myDate.getDate() - 6);
        var dateArray = []; 
        var dateTemp; 
        var flag = 1; 
        for (var i = 0; i < 7; i++) {
            dateTemp = myDate.getFullYear()+'-'+(myDate.getMonth()+1)+"-"+getZero(myDate.getDate());
            dateArray.push(dateTemp);
            myDate.setDate(myDate.getDate() + flag);
        }
        axios.get(`https://elm.cangdu.org/statis/user/${dateArray[6]}/count`).then(res=>{
            setuserCount(res.data.count)
        })
        axios.get(`https://elm.cangdu.org/statis/order/${dateArray[6]}/count`).then(res=>{
            setorderCount(res.data.count)
        })
        axios.get(`https://elm.cangdu.org/statis/admin/${dateArray[6]}/count`).then(res=>{
            setadminCount(res.data.count)
        })
        axios.get(`https://elm.cangdu.org/v1/users/count`).then(res=>{
            setusersCount(res.data.count)
        })
        axios.get(`https://elm.cangdu.org/bos/orders/count`).then(res=>{
            setordersCount(res.data.count)
        })
        axios.get(`https://elm.cangdu.org/admin/count`).then(res=>{
            setAdminCount(res.data.count)
        })
        var myChart = echarts.init(document.getElementById('ond'));
        var option;

        option = {
        title: {
            text: '走势图'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['新用户注册', '新增订单', '新增管理员']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
            saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: [dateArray[0],dateArray[1],dateArray[2], dateArray[3],dateArray[4],dateArray[5],dateArray[6]]
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '新用户注册',
                type: 'line',
                stack: 'Total',
                // data: [user(dateArray[0]), user(dateArray[1]), user(dateArray[2]), user(dateArray[3]), user(dateArray[4]), user(dateArray[5]), user(dateArray[6])]
                data:[]

            },
            {
                name: '新增订单',
                type: 'line',
                stack: 'Total',
                // data: [order(dateArray[0]), order(dateArray[1]), order(dateArray[2]), order(dateArray[3]), order(dateArray[4]), order(dateArray[5]), order(dateArray[6])]
                data:[]

            },
            {
                name: '新增管理员',
                type: 'line',
                stack: 'Total',
                // data: [admin(dateArray[0]), admin(dateArray[1]), admin(dateArray[2]), admin(dateArray[3]), admin(dateArray[4]), admin(dateArray[5]), admin(dateArray[6])]
                data:[]

            }
        ]
        };
        option && myChart.setOption(option);
        days.forEach(i=>{ 
            var puser = new Promise((resolve,reject)=>{
            axios.get(`https://elm.cangdu.org/statis/user/${i}/count`).then(res=>{
                // num = res.data.count
                if(res.data.status==1){
                    resolve(res.data.count )
                }
            }).catch((error)=>{
                reject(error)
            })
        }) 
        userPromise.unshift(puser)

            var porder = new Promise((resolve,reject)=>{
            axios.get(`https://elm.cangdu.org/statis/order/${i}/count`).then(res=>{
                // num = res.data.count
                if(res.data.status==1){
                    resolve(res.data.count )
                }
            }).catch((error)=>{
                reject(error)
            })
        }) 
        orderPromise.unshift(porder)

            var padmin = new Promise((resolve,reject)=>{
            axios.get(`https://elm.cangdu.org/statis/admin/${i}/count`).then(res=>{
                // num = res.data.count
                if(res.data.status==1){
                    resolve(res.data.count )
                }
            }).catch((error)=>{
                reject(error)
            })
        }) 
        adminPromise.unshift(padmin)
    }) 

        Promise.all([...userPromise,...orderPromise,...adminPromise]).then(res=>{
             console.log(res);
             myChart.setOption({
                series: [
                    {
                        name: '新用户注册',
                        type: 'line',
                        stack: 'Total',
                        data:res.slice(0,7)
        
                    },
                    {
                        name: '新增订单',
                        type: 'line',
                        stack: 'Total',
                        data:res.slice(7,14)
        
                    },
                    {
                        name: '新增管理员',
                        type: 'line',
                        stack: 'Total',
                        data:res.slice(14)
        
                    }
                ]
             })
        })


    },[])
       
        // var porder = new Promise((resolve,reject)=>{
        //     axios.get(`https://elm.cangdu.org/statis/order/${i}/count`).then(res=>{
        //         // num = res.data.count
        //         if(res.data.status==1){
        //             resolve(res.data.count )
        //         }
        //     }).catch((error)=>{
        //         reject(error)
        //     })
        // }) 
        // var padmin = new Promise((resolve,reject)=>{
        //     axios.get(`https://elm.cangdu.org/statis/admin/${i}/count`).then(res=>{
        //         // num = res.data.count
        //         if(res.data.status==1){
        //             resolve(res.data.count )
        //         }
        //     }).catch((error)=>{
        //         reject(error)
        //     })
        // }) 

    // async function user(date) {
    //     var num = 0
    //     await axios.get(`https://elm.cangdu.org/statis/user/${date}/count`).then(res=>{
    //         num = res.data.count
    //     })
    //     return num
    // }
  
    function getZero(num) {    // 个位数前补0
        if (parseInt(num) < 10) {
            num = '0' + num;
        }
        return num;
    }
    // function order(date) {
    //     var nums = 0
    //     axios.get(`https://elm.cangdu.org/statis/order/${date}/count`).then(res=>{
    //         nums = res.data.count
    //     })
    //     return nums
    // }
    // function admin(date) {
    //     var nums = 0
    //     axios.get(`https://elm.cangdu.org/statis/admin/${date}/count`).then(res=>{
    //         nums = res.data.count
    //     })
    //     return nums
    // }
    
    return(
        <div id="manage">
            <section>
                <header>数据统计</header>
                <div className="one">
                    <span>当日数据：</span>
                    <span>{userCount}新增用户</span>
                    <span>{orderCount}新增订单</span>
                    <span>{adminCount}新增管理员</span>
                </div>
                <div className="two">
                    <span>总数据：</span>
                    <span>{usersCount}注册用户</span>
                    <span>{ordersCount}订单</span>
                    <span>{AdminCount}管理员</span>
                </div>
            </section>
            <div className="line1">
                <div ref={convas} id='ond' className="convas">
                    
                </div>
            </div>
        </div>
    )
}